<template>
    <!--添加备件使用-->
    <Modal :mask-closable="false" v-model="deviceVisible" class="modal-content-layout" title="添加物料" width="40%">
        <Form v-if="deviceVisible" ref="deviceForm" :model="formTop" label-position="top" :rules="validateDevice">
            <Row :gutter="24">
                <Col :span="24">
                <FormItem label="品名" prop="goodsName">
                    <Select filterable clearable v-model="formTop.goodsName" :remote-method="materielNoChangeAdd"
                        @on-change="materieChange">
                        <Option v-for="(item,index) in materielNoList" :value="item.materialName" :label="item.materialName"
                            :key="index" />
                    </Select>
                </FormItem>
                </Col>
                <Col :span="24">
                <FormItem label="物料号" prop="code">
                    <Input readonly v-model="formTop.code" />
                </FormItem>
                </Col>
                <Col :span="24">
                <FormItem label="规格" prop="specification">
                    <Input readonly v-model="formTop.specification" />
                </FormItem>
                </Col>
                <Col :span="24">
                <FormItem label="数量" prop="qty">
                    <Input v-model="formTop.qty" />
                </FormItem>
                </Col>
            </Row>
        </Form>
        <div slot="footer">
            <Button type="default" @click="handleCancel">{{ $t('common.Cancle') }}</Button>
            <Button type="primary" :loading="loadingVisible" @click="handleOk">{{ $t('maintenance.Confirmed') }}</Button>
        </div>
    </Modal>
</template>

<script>
export default {
    name: "addDeviceModal",
    data() {
        const validateNum = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('所需数量必填'));
            }
            // 模拟异步验证效果
            if (!/^[1-9][0-9]*$/.test(value)) {
                callback(new Error('请输入整数'));
            } else {
                callback();
            }
        };
        return {
            workorderNo: '',
            deviceMId_: '',
            orgId: '',
            deviceVisible: false,
            loadingVisible: false,
            searchLoading: false,
            isDisabled: false,
            formTop: {
                code: '',
                qty: '',
                goodsName: '',
                specification: '',
            },
            materielNoList: [],
            validateDevice: {
                code: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                goodsName: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                // specification: [
                //     { required: true, message: '请输入', trigger: 'change' }
                // ],
                qty: [
                    { required: true, validator: validateNum, trigger: 'blur' }
                ],
            },
            numberList: [],
            backupNoList: [],
            searchNoParams: {},
            faultPosition: []
        }
    },
    methods: {
        materieChange(val) {
            if (!val) {
                this.formTop = {
                    code: '',
                    qty: '',
                    goodsName: '',
                    specification: '',
                }
                return
            }
            const obj = this.materielNoList.find(item => item.materialName == val)
            if (obj) {
                this.formTop = {
                    code: obj.materialCode,
                    goodsName: obj.materialName,
                    specification: obj.materialModel,
                    qty: this.formTop.qty
                }
            } else {

            }
        },
        show() {
            this.formTop = {
                code: '',
                qty: '',
                goodsName: '',
                specification: '',
            }
            this.deviceVisible = true
        },
        debounceSerach(fn, delay) {
            let _this = this
            return function f(...args) {
                if (_this.timeID) {
                    clearTimeout(_this.timeID);
                }
                _this.timeID = setTimeout(() => {
                    fn(args);
                }, delay);
            };
        },
        materielNoChangeAdd(val, value) {
            if (val && this.materielNoList.find(item => (item.materielNo + '-' + item.materielName) === val)) {
                return;
            }
            const fn = this.debounceSerach(() => {
                const params = {
                    materialName: val,
                    pageNum: 1,
                    pageSize: 9999,
                }
                this.axios({
                    method: 'post',
                    url: '/dms/material/page',
                    data: { ...params }
                }).then(res => {
                    if (res.code === 200) {
                        if (res.data) {
                            this.materielNoList = res.data.records
                        }
                        if (value) {
                            this.formInline.bomId = Number(value)
                        }
                    } else {
                        this.$Message.warning(({ content: res.msg, duration: 6, closable: true }));
                    }
                })
            }, 360)
            fn()
        },
        handleRemote(query) {
            if (query !== "") {
                this.searchLoading = true;
                this.axios({
                    method: "post",
                    // url: "/dms/applyUse/queryBymaterielNo",
                    url: '/dms/dmsBom/queryByDeviceTypeAndDeviceName',
                    data: {
                        param: query,
                        // orgId: this.orgId
                        ...this.searchNoParams
                    },
                })
                    .then((res) => {
                        if (res.code === 200) {
                            this.numberList = res.data.map(item => {
                                item.desc = item.materielNo + '-' + item.materielName;
                                return item;
                            })
                        } else {
                            this.$Message.warning({
                                content: res.msg,
                                duration: 6,
                                closable: true,
                            });
                        }
                    })
                    .finally(() => {
                        this.searchLoading = false;
                    });
            } else {
                this.numberList = [];
            }
        },
        handleChangeWl(val) {
            // console.log(val)
            //materielName
            // let info = this.numberList.length ? this.numberList.filter(item => item.materielNo === val)[0] : {}
            const obj = this.numberList.find(item => item.materielNo === val.value)

            if (obj) {
                this.formTop.goodsName = obj.materielName;
                this.formTop.specification = obj.specification
                this.formTop.quantityInStock = obj.quantityInStock
            }
            // this.backupNoList = info.purchaseNos || []
        },
        handleCancel() {
            this.deviceVisible = false
            this.loadingVisible = false
        },
        handleOk() {
            this.$refs.deviceForm.validate((valid) => {
                if (valid) {
                    this.$emit('addOk', this.formTop)
                    this.handleCancel();
                }
            })
        },
    }
}
</script>

<style scoped lang="scss">
/deep/.ivu-form-item-label {
    background: white !important;
    /*display: inline-block;*/
    /*width: 40%;*/
    /*height: 48px;*/
    /*line-height: 48px;*/
    /*background: #ffffff;*/
    /*text-align: right;*/
    border-right: 0 !important;
    /*padding-right: 10px;*/
}

/deep/.ivu-form-item {
    margin-bottom: 24px !important;
    border-right: 0 !important;
}
</style>
